<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import HomeProduct from './components/homeProduct.vue'
import HomeHotSearch from './components/homeSearch.vue'
</script>

<template>
  <div class="container">
    <!-- 左侧分类 -->
    <HomeCategory />

    <!-- 中间轮播图 + 右侧热搜榜单容器 -->
    <div class="banner-hot-wrapper">
      <HomeBanner />
      <HomeHotSearch />
    </div>
  </div>
<!--  <HomeNew />-->
<!--  <HomeHot />-->
  <HomeProduct />
</template>
<style lang="scss" scoped>
.container {
  display: flex;
  align-items: start; // 避免子元素底部对齐
  gap: 20px; // 控制组件之间间距
  position: relative;
  margin-bottom: 40px;
  min-width: 1000px; // 防止宽度不足导致换行
}

.banner-hot-wrapper {
  display: flex;
  flex-direction: row; // 水平排列
  gap: 20px; // 控制轮播图和热搜榜单之间的间距
  flex: 1; // 自动伸缩以适应剩余空间
}
</style>